<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{list-style: none;}
        * {
            marginL: 0;
            padding: 0;
        }

        .toubu {
            width: 1210px;
            height: 98px;
            /* background-color: yellow; */
            margin: 0 auto;
        }

        .toubu>.toubu_yi {
            width: 250px;
            height: 98px;
            /* background-color: teal; */
            float: left;

        }

        .toubu>.toubu_er {
            width: 100px;
            height: 98px;
            /* background-color: tomato; */
            float: left;
            font-size: 25px;
            line-height: 50px;
            margin-left: 20px;
            color: gray;
        }

        .toubu>.toubu_san {
            width: 200px;
            height: 98px;
            /* background-color: violet; */
            float: right;
            line-height: 50px;
            color: gray;
        }

        /* <!-- 登录框 --> */
        .denglu {
            width: 100%px;
            height: 584px;
            background-color: rgb(38, 37, 37);
            margin-top: 20px;
        }

        .denglu_yi {
            width: 1210px;
            height: 584px;
            background-color: green;
            margin: 0 auto;
            background-image: url(./img/登录背景.jpg);
        }

        .denglu_yi>.denglu_er {
            width: 400px;
            height: 520px;
            background-color: white;
            float: right;
            margin-top: 30px;

        }

        .denglu_yi>.denglu_er>.denglu_one {
            width: 200px;
            height: 50px;
            /* background-color: beige; */
            margin: 0 auto;
            font-size: 25px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .denglu_yi>.denglu_er>input {
            width: 338px;
            height: 50px;
            margin: 0 auto;
            display: block;
            outline: none;
            padding-left: 20px;
        }

        .denglu_yi>.denglu_er>.denglu_two {
            width: 340px;
            height: 50px;
            background-color: rgb(6, 0, 12);
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
            margin-top: 40px;
            color: white;
            display: block;

        }
        .denglu_yi>.denglu_er>.denglu_two:hover{
            background-color: indianred;
        }
        .denglu_er>ul{
            width: 340px;
            height: 20px;
            /* background-color: royalblue; */
            margin: 0 auto;
            margin-top: 20px;

            color: gray;
        }
        .denglu_er>ul>li{
            float: left;
        }
        .denglu_er>ul>li:nth-child(2){
            float: right;
        }
        .denglu_er>ul>li:nth-child(2)>span:nth-child(1){
            color: darkorange;
        }
        /* <!-- 第二十二部分  最后三步 --> */
.box{
    width: 100%;
    height: 600px;
    background-image:url(./img/beijing.jpg) ;
    border-top:1px solid gray ;
}
/* <!-- 第一步 --> */

.box>.box_one{
    width: 1210px;
    height: 117px;
    /* background: greenyellow; */
    margin: 0 auto;
    border-bottom:1px solid grey;
}
.box>.box_one>ul>li{
    width: 242px;
    height: 64px;
    float: left;
    margin-top: 26px;
    /* background: rgb(215, 230, 173); */
}

.box>.box_one>ul>li>a>img{
    display: block;
    width: 70px;
    height: 64px;
    float: left;
}
.box>.box_one>ul>li>div{
    float: lift;
    font-size: 10px;
    line-height: 30px;
}
.box>.box_one>ul>li>div>p:nth-child(1){
    font-weight:bold;
}
.box>.box_one>ul>li>div>p:nth-child(2):hover{
 color: red;   
}
/* 第二步 */

.box_two{
    width: 1210px;
    height: 283px;
    /* background: hotpink; */
    margin: 0 auto;
}
.box_two>ul>li{
    float: left;
    width: 170px;
    height: 185px;
    font-size: 15px;
    /* background: lemonchiffon; */
    box-sizing: border-box;
    
}
.box_two>ul>li>span{
    display: block;
    width: 100px;
    padding: 2px;
   
}
.box_two>ul>li>span>a{
    color: black   ;
}
.box_two>ul>li>span:hover{
   color: crimson;
font-weight: bold;

}
.box_two>ul>li>span:nth-child(1){
padding-bottom: 10px;
padding-top: 20px;
font-weight: bold;
}
/* 第三步 */
.dibu{
    width: 1210px;
    height: 194px;
    /* background: crimson; */
    margin: 0 auto;
}

.dibu>.dibu_one{
    width: 1210px;
    height: 66px;
    /* background: cyan; */
  

}
.dibu>.dibu_one>ul{
    width: 400px;
    height: 20px;
    margin: 0 auto;
    padding-top: 15px;
}
.dibu>.dibu_one>ul>li{
    float: left;
    font-size   : 15px;
    color: white;

}
.dibu>.dibu_one>ul>li>a{
    color: white;
}
.dibu>.dibu_one>ul>li>a:hover{
    color: rgb(151, 47, 47);
    font-weight: bold;
}
.dibu>.dibu_one>ul>li>span{
    padding: 0 10px;
    color: white;
}
.dibu>.dibu_two{
    width: 800px;
    height: 88px;
    /* background: coral; */
    margin: 0 auto;
}
.dibu>.dibu_two>ul>li{
    float: left;
    font-size   : 13px;
    padding-bottom: 15px;
    color: white;

}
.dibu>.dibu_two>ul>li:hover{
   color: rgb(151, 47, 47);
font-weight: bold; 
}

.dibu>.dibu_two>ul>li>span{
    padding: 0 5px;

}
.dibu>.dibu_two>p{
    font-size: 12px;
    color: white;

}
.dibu>.dibu_two>p>span{
    padding: 0 5px;
}
.dibu>.dibu_three{
    width: 340px;
    height: 40px;
    /* background: rgb(71, 255, 169); */
    margin:0 auto;
}

.denglu>.denglu_yi>.denglu_er{
    width: 400px;
    height: 500px;
    background-color: white;
    float:right;
    text-align: center;
    font-size: 20px;
    margin-top: 80px;
}
.denglu>.denglu_yi>.denglu_er input{
    width: 320px;
    height: 54px;
    padding-left: 30px;

}
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="toubu">
        <div class="toubu_yi"><img src="./img/22.jpg"></div>
        <div class="toubu_er">
            <p>欢迎登录</p>
        </div>
        <div class="toubu_san">
            <p><span></span>客服热线: 4008-6767-38</p>
        </div>
    </div>
    <!-- 登录框 -->
    <div class="denglu">
        <div class="denglu_yi">
            <div class="denglu_er">
               
                <div class="jumbotron">
                    <h1>欢迎登录</h1>
                    <div class="login">
                      <form class="form-horizontal">
                        <div class="form-group">
                          <label for="username" class="col-sm-2 control-label">用户名</label>
                          <div class="col-sm-10">
                            <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
                          </div>
                        </div>
                        <div class="form-group">
                          <label for="password" class="col-sm-2 control-label">密码</label>
                          <div class="col-sm-10">
                            <input name="pwd" type="password" class="form-control" id="password" placeholder="密码">
                          </div>
                        </div>
                
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-default">登录</button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
        </div>
    </div>


 <!-- 第二十二部分  最后三步 -->
 <div class="box">
    <!-- 第一步 -->
    <div class="box_one">
        <ul>
            <li>
               <a href="xxx"> <img src="./img/1+1.jpg" alt=""></a>
                <div>
                    <p>正品保障</p>
                    <p>品牌授权 官方验证</p>
                </div>
            </li>
            <li>
                <a href="xxx"><img src="./img/1+2.jpg" alt=""></a>
                <div>
                    <p>专柜发货</p>
                    <p>专柜直接到店里自提</p>
                </div>
            </li>
            <li>
                <a href="xxx"><img src="./img/1+3.jpg" alt=""></a>
                <div>
                    <p>无忧售后</p>
                    <p>七天无理由退换货</p>
                </div>
            </li>
            <li>
                <a href="xxx"><img src="./img/1+4.jpg" alt=""></a>
                <div>
                    <p>vip服务</p>
                    <p>享品牌会员售前售后服务</p>
                </div>
            </li>
            <li>
                <a href="xxx"><img src="./img/1+5.jpg" alt=""></a>
                <div>
                    <p>权威荣耀</p>
                    <p>商务部授予诚信示范企业</p>
                </div>
            </li>
        </ul>
    </div>

    <!-- 第二步 -->
    <div class="box_two">
        <ul>
            <li>
                <span>服务保障</span>
                <span><a href="http://www.5lux.com/help/question/114" target="_blank">品牌授权正品</a></span>
                <span><a href="http://www.5lux.com/help/question/172" target="_blank">品牌客服</a></span>
                <span><a href="http://www.5lux.com/help/question/178" target="_blank">预约到店体验</a></span>
                <span><a href="http://www.5lux.com/help/question/105" target="_blank">7天无理由退换</a></span>
            </li>
            <li>
                <span>使用帮助</span>
                <span><a href="http://www.5lux.com/help/question/26" target="_blank">常见问题</a></span>
                <span><a href="http://www.5lux.com/help/question/40" target="_blank">会员制度</a></span>
                <span><a href="http://www.5lux.com/help/question/57" target="_blank">集团采购</a></span>
                <span><a href="http://www.5lux.com/help/question/93" target="_blank">礼品卡</a></span>
            </li>
            <li>
                <span>支付方式</span>
                <span><a href="http://www.5lux.com/help/question/37" target="_blank">到店付款</a></span>
                <span>货到付款</span>
                <span><a href="http://www.5lux.com/help/question/38" target="_blank">在线支付</a></span>
                <span><a href="http://www.5lux.com/help/question/82" target="_blank">余额支付</a></span>
                <span><a href="http://www.5lux.com/help/question/109" target="_blank">分期付款</a></span>
            </li>
            <li>
                <span>配送方式</span>
                <span><a href="http://www.5lux.com/help/question/89" target="_blank">配送说明</a></span>
                <span><a href="http://www.5lux.com/help/question/178" target="_blank">专柜自提</a></span>
                <span><a href="http://www.5lux.com/help/question/173" target="_blank">验货签收</a></span>
                <span>验货签收</span>
            </li>
            <li>
                <span>售后服务</span>
                <span><a href="http://www.5lux.com/help/question/85" target="_blank">品牌售后</a></span>
                <span><a href="http://www.5lux.com/help/question/85" target="_blank">售后咨询</a></span>
                <span><a href="http://www.5lux.com/help/question/105" target="_blank">退换政策</a></span>
                <span><a href="http://www.5lux.com/help/question/26" target="_blank">发票保障</a></span>
            </li>
            <li>
                <span>第五大道APP</span>
                <span><img src="./img/erweima1.jpg" alt=""></span>
            </li>
            <li>
                <span>第五大道微博</span>
                <span><img src="./img/erweima2.jpg" alt=""></span>
            </li>
        </ul>
    </div>
    <!--第三步  -->
    <div class="dibu">
        <div class="dibu_one">
            <ul>
                <li><a href="http://www.5lux.com/good/list/4" target="_blank">箱包</a><span>|</span></li>
                <li><a href="http://www.5lux.com/good/list/107" target="_blank">服饰</a><span>|</span></li>
                <li><a href="http://www.5lux.com/good/list/138" target="_blank">腕表</a><span>|</span></li>
                <li><a href="http://www.5lux.com/good/list/165" target="_blank">配饰</a><span>|</span></li>
                <li><a href="http://www.5lux.com/good/list/143" target="_blank">鞋靴</a><span>|</span></li>
                <li><a href="http://www.5lux.com/activity" target="_blank">特惠</a><span>|</span></li>
                <li><a href="http://www.5lux.com/gift" target="_blank">礼品区</a></li>
            </ul>
        </div>
        <div class="dibu_two">
            <ul>
                <li>关于第五大道<span>|</span></li>
                <li>网站地图<span>|</span></li>
                <li>品牌合作专区<span>|</span></li>
                <li>媒体聚焦<span>|</span></li>
                <li>商务合作<span>|</span></li>
                <li>商家合作<span>|</span></li>
                <li>加入第五大道<span>|</span></li>
                <li>友情链接<span>|</span></li>
                <li>奢尚志<span>|</span></li>
                <li>联系我们<span>|</span></li>
                <li>投诉建议</li>
            </ul>
            <p>
                Copyright © 2008-2014 瑞美嘉信国际信息技术（北京）有限公司&nbsp;版权所有京ICP备09012701号-1

                <span>京东网安备 11010102003747号</span>|<span>营业执照</span>
            </p>
        </div>

        <div class="dibu_three">
            <a href="xxx"><img src="./img/yi.jpg" alt=""></a>
            <a href="xxx"><img src="./img/er.jpg" alt=""></a>
            <a href="xxx"><img src="./img/san.jpg" alt=""></a>
        </div>
    </div>

</div> 
<script src="./javascripts/cookie.js"></script>
<script src="./libs/tools.js"></script>
<script src="./libs/jquery.min.js"></script>
<script src="./libs/myAjax.js"></script>


<script>
  $('button').click(function(){
    // 发送 ajax请求 方式是 post 携带参数 userName userPwd
    const xhr = myPromiseJQueryAjax('./server/goods_login.php' , 'post' , { userName: $('[name="name"]').val() , userPwd:  $('[name="pwd"]').val() } , 'json');
    xhr.then(function(res){
      // 根据结果 动态渲染生成页面
      if( res.result === 1 ){
        // 登录成功

        // 设定cookie信息
        // 0 表示 没有登录 1 表示 登录
        // 其他 页面可以通过 cookie 的 login 数据 判断 是不是已经登录了
        mySetCookie( 'login' , 1 , 7*24*60*60 , '/' );

        // 跳转页面
        if(window.confirm('您登录成功,点击确定跳转来时候的页面')){
          window.location.href = `${window.location.search.substr(5)}`;
          window.location.href = './index.html';
          
        }
        
        


      }else if( res.result === 0 ){
        // 登录失败
        window.alert('您的账号密码有误,请您检查后,重新登录');
      }
    })

  });
   </script>
</body>

</html>